<template>
  <div class="customer-page-container">
    <!-- 搜索表单区域 -->
    <div class="search-form">
      <el-form :inline="true" :model="pageObj.page.orderInfo" label-width="90px">
        <el-form-item label="订单ID">
          <el-input v-model.number="pageObj.page.orderInfo.id" placeholder="输入订单ID搜索" clearable />
        </el-form-item>
        <el-form-item label="司机ID">
          <el-input v-model="pageObj.page.orderInfo.driverId" placeholder="输入订单ID搜索" clearable />
        </el-form-item>
        <el-form-item label="乘客ID">
          <el-input v-model="pageObj.page.orderInfo.passengerId" placeholder="输入订单ID搜索" clearable />
        </el-form-item>
        <el-form-item label="乘客手机号">
          <el-input v-model="pageObj.page.orderInfo.passengerPhone" placeholder="输入乘客手机号搜索" clearable />
        </el-form-item>
        <el-form-item label="司机手机号">
          <el-input v-model="pageObj.page.orderInfo.driverPhone" placeholder="输入司机手机号搜索" clearable />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="findData(1)">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-table :data="pageObj.parmData" class="customer-table" @selection-change="handleSelectionChange" stripe border>
      <!-- 基础选择列和ID -->
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" prop="id" width="80" align="center" />

      <!-- 乘客信息 -->
      <el-table-column label="乘客ID" prop="passengerId" width="100" align="center" />
      <el-table-column label="乘客手机号" prop="passengerPhone" width="120" align="center" />

      <!-- 司机与车辆信息 -->
      <el-table-column label="司机ID" prop="driverId" width="100" align="center" />
      <el-table-column label="司机手机号" prop="driverPhone" width="120" align="center" />
      <el-table-column label="车辆ID" prop="carId" width="100" align="center" />
      <el-table-column label="车辆号牌" prop="vehicleNo" width="100" align="center" />
      <el-table-column label="车辆类型" prop="vehicleType" width="100" align="center" />
      <el-table-column label="驾驶证号" prop="licenseId" width="180" align="center" show-overflow-tooltip />

      <!-- 订单基础信息 -->
      <el-table-column label="发起地" prop="address" width="100" align="center" />
      <el-table-column label="出发地点" prop="departure" width="180" align="center" show-overflow-tooltip />
      <el-table-column label="目的地点" prop="destination" width="180" align="center" show-overflow-tooltip />
      <el-table-column label="订单时间" prop="orderTime" width="160" align="center" />
      <el-table-column label="预计用车时间" prop="departTime" width="160" align="center" />

      <!-- 订单状态信息 -->
      <el-table-column label="订单状态" prop="orderStatus" width="120" align="center">
        <template #default="scope">
          <el-tag :type="getStatusTagType(scope.row.orderStatus)">
            {{ getStatusText(scope.row.orderStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="载客里程(米)" prop="driveMile" width="120" align="center" />
      <el-table-column label="载客时间(分)" prop="driveTime" width="120" align="center" />
      <el-table-column label="费用(元)" prop="price" width="100" align="center" />

      <!-- 时间节点信息 -->
      <el-table-column label="接单时间" prop="receiveOrderTime" width="160" align="center" />
      <el-table-column label="接到乘客时间" prop="pickUpPassengerTime" width="160" align="center" />
      <el-table-column label="乘客下车时间" prop="passengerGetoffTime" width="160" align="center" />
      <!-- 取消时间列：先固定显示列，再在单元格中控制内容显示 -->
      <el-table-column label="取消时间" prop="cancelTime" width="160" align="center">
        <template #default="scope">
          <!-- 只在订单状态为取消且有取消时间时显示内容 -->
          <span v-if="showCancelTime(scope.row)">
            {{ scope.row.cancelTime }}
          </span>
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作" align="center" width="80" fixed="right">
        <template #default="scope">
          <el-button size="small" :icon="View" circle type="info" title="查看详情"
            @click="handleView(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination background layout="prev, pager, next, total" :total="pageObj.page.total"
        :page-size="pageObj.page.pageSize" :current-page="pageObj.page.pageNum" @current-change="findData" />
    </div>

    <!-- 详情对话框 -->
    <el-dialog v-model="pageObj.dialogObj.dialogFormVisible" draggable :title="pageObj.dialogObj.title" width="70%"
      class="customer-dialog">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-descriptions column="1" border>
            <el-descriptions-item label="订单ID">{{ pageObj.parm.id }}</el-descriptions-item>
            <el-descriptions-item label="发起时间">{{ pageObj.parm.orderTime }}</el-descriptions-item>
            <el-descriptions-item label="发起地">{{ pageObj.parm.address }}</el-descriptions-item>
            <el-descriptions-item label="出发地点">{{ pageObj.parm.departure }}</el-descriptions-item>
            <el-descriptions-item label="出发地经纬度">{{ pageObj.parm.depLongitude }}, {{ pageObj.parm.depLatitude
            }}</el-descriptions-item>
            <el-descriptions-item label="目的地点">{{ pageObj.parm.destination }}</el-descriptions-item>
            <el-descriptions-item label="目的地经纬度">{{ pageObj.parm.destLongitude }}, {{ pageObj.parm.destLatitude
            }}</el-descriptions-item>
            <el-descriptions-item label="坐标加密方式">
              {{ getEncryptText(pageObj.parm.encrypt) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions column="1" border>
            <el-descriptions-item label="订单状态">{{ getStatusText(pageObj.parm.orderStatus) }}</el-descriptions-item>
            <el-descriptions-item label="载客里程">{{ pageObj.parm.driveMile }}米</el-descriptions-item>
            <el-descriptions-item label="载客时间">{{ pageObj.parm.driveTime }}分钟</el-descriptions-item>
            <el-descriptions-item label="费用">{{ pageObj.parm.price }}元</el-descriptions-item>
            <el-descriptions-item label="运价类型">{{ pageObj.parm.fareType }}</el-descriptions-item>
            <el-descriptions-item label="运价版本">{{ pageObj.parm.fareVersion }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ pageObj.parm.gmtCreate }}</el-descriptions-item>
            <el-descriptions-item label="最后更新时间">{{ pageObj.parm.gmtModified }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>

      <el-divider content-position="left">时间线信息</el-divider>

      <el-timeline>
        <el-timeline-item timestamp="订单创建" placement="top">
          <el-card>
            <p>时间：{{ pageObj.parm.orderTime }}</p>
            <p>预计用车时间：{{ pageObj.parm.departTime }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="司机接单" placement="top" v-if="pageObj.parm.receiveOrderTime">
          <el-card>
            <p>时间：{{ pageObj.parm.receiveOrderTime }}</p>
            <p>接单时车辆位置：{{ pageObj.parm.receiveOrderCarLongitude }}, {{ pageObj.parm.receiveOrderCarLatitude }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="司机到达" placement="top" v-if="pageObj.parm.driverArrivedDepartureTime">
          <el-card>
            <p>时间：{{ pageObj.parm.driverArrivedDepartureTime }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="乘客上车" placement="top" v-if="pageObj.parm.pickUpPassengerTime">
          <el-card>
            <p>时间：{{ pageObj.parm.pickUpPassengerTime }}</p>
            <p>上车位置：{{ pageObj.parm.pickUpPassengerLongitude }}, {{ pageObj.parm.pickUpPassengerLatitude }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="乘客下车" placement="top" v-if="pageObj.parm.passengerGetoffTime">
          <el-card>
            <p>时间：{{ pageObj.parm.passengerGetoffTime }}</p>
            <p>下车位置：{{ pageObj.parm.passengerGetoffLongitude }}, {{ pageObj.parm.passengerGetoffLatitude }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="订单取消" placement="top" v-if="pageObj.parm.cancelTime">
          <el-card>
            <p>时间：{{ pageObj.parm.cancelTime }}</p>
            <p>取消者：{{ getCancelOperatorText(pageObj.parm.cancelOperator) }}</p>
            <p>取消类型：{{ getCancelTypeText(pageObj.parm.cancelTypeCode) }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="pageObj.dialogObj.dialogFormVisible = false">关 闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from 'axios';
import { reactive, ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit } from '@element-plus/icons-vue';
import { orderService } from '../stores/order.ts';

// 页面数据对象
const pageObj = reactive({
  page: {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    // 搜索参数
    orderInfo: {
    id: null,
    passengerId: null,
    passengerPhone: '',
    driverId: null,
    driverPhone: ''
    }
  },
  parmData: [], // 表格数据列表
  parm: { // 表单数据
    id: null,
    passengerId: null,
    passengerPhone: '',
    driverId: null,
    driverPhone: '',
    carId: null,
    vehicleType: '',
    address: '',
    orderTime: '',
    departTime: '',
    departure: '',
    depLongitude: '',
    depLatitude: '',
    destination: '',
    destLongitude: '',
    destLatitude: '',
    encrypt: 0,
    fareType: '',
    fareVersion: null,
    receiveOrderCarLongitude: '',
    receiveOrderCarLatitude: '',
    receiveOrderTime: '',
    licenseId: '',
    vehicleNo: '',
    toPickUpPassengerTime: '',
    driverArrivedDepartureTime: '',
    pickUpPassengerTime: '',
    pickUpPassengerLongitude: '',
    pickUpPassengerLatitude: '',
    passengerGetoffTime: '',
    passengerGetoffLongitude: '',
    passengerGetoffLatitude: '',
    cancelTime: '',
    cancelOperator: null,
    cancelTypeCode: null,
    driveMile: null,
    driveTime: null,
    orderStatus: null,
    price: null,
    gmtCreate: '',
    gmtModified: ''
  },
  dialogObj: {
    dialogFormVisible: false,
    title: '订单详情'
  }
});

// 选中的行数据
const multipleSelection = ref([]);

// 页面加载时查询数据
onMounted(() => {
  findData(1);
});

// 查询数据
const findData = async (pageNum) => {
  pageObj.page.pageNum = pageNum;
  const res = await orderService.selectOrder(pageObj.page)
  console.log("从后端拿到的订单数据——————————", res);
  pageObj.parmData = res;
  pageObj.page.total = res.total;
};

// 重置搜索表单
const resetForm = () => {

  pageObj.page.orderInfo = {
    id: null,
    passengerId: null,
    passengerPhone: '',
    driverId: null,
    driverPhone: ''
  };
    findData(1);
};

// 处理表格选择变化
const handleSelectionChange = (selection) => {
  multipleSelection.value = selection;
};

// 查看详情
const handleView = (row) => {
  pageObj.parm = { ...row };
  pageObj.dialogObj.dialogFormVisible = true;
};

// 获取订单状态文本
const getStatusText = (status) => {
  const statusMap = {
    1: '订单开始',
    2: '司机接单',
    3: '去接乘客',
    4: '司机到达起点',
    5: '乘客上车',
    6: '行程结束未支付',
    7: '发起收款',
    8: '支付完成',
    9: '订单取消'
  };
  return statusMap[status] || '未知状态';
};

// 获取订单状态标签样式
const getStatusTagType = (status) => {
  const typeMap = {
    1: 'info',
    2: 'primary',
    3: 'warning',
    4: 'success',
    5: 'success',
    6: 'warning',
    7: 'primary',
    8: 'success',
    9: 'danger'
  };
  return typeMap[status] || 'info';
};

// 获取坐标加密方式文本
const getEncryptText = (encrypt) => {
  const encryptMap = {
    1: 'GCJ-02测绘局标准',
    2: 'WGS84 GPS标准',
    3: 'BD-09 百度标准',
    4: 'CGCS2000 北斗标准',
    0: '其他'
  };
  return encryptMap[encrypt] || '未知';
};

// 获取取消发起者文本
const getCancelOperatorText = (operator) => {
  const operatorMap = {
    1: '乘客',
    2: '驾驶员',
    3: '平台公司'
  };
  return operatorMap[operator] || '未知';
};

// 获取取消类型文本
const getCancelTypeText = (type) => {
  const typeMap = {
    1: '乘客提前撤销',
    2: '驾驶员提前撤销',
    3: '平台公司撤销',
    4: '乘客违约撤销',
    5: '驾驶员违约撤销'
  };
  return typeMap[type] || '未知';
};

// 判断是否显示取消时间
const showCancelTime = (row) => {
  return row.orderStatus === 9 && row.cancelTime;
};
</script>
<style>
/* 页面容器样式 */
.customer-page-container {
  padding: 15px;
  background-color: rgba(45, 55, 72, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  color: #cdd6e8;
  min-height: calc(100vh - 77px - 40px);
}

/* 搜索表单区域 */
.search-form {
  background-color: rgba(31, 41, 55, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 15px 15px 0 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

/* 搜索表单内部元素样式 */
.search-form .el-form-item__label {
  color: #d1d5db;
}

.search-form .el-input__wrapper {
  background-color: rgba(55, 65, 81, 0.8) !important;
  box-shadow: none !important;
  border: 1px solid rgba(75, 85, 99, 0.7);
}

.search-form .el-input__inner {
  color: #e5e7eb !important;
}

.search-form .el-input__inner::placeholder {
  color: #9ca3af;
}

.search-form .el-select .el-input__wrapper {
  background-color: rgba(55, 65, 81, 0.8) !important;
  border: 1px solid rgba(75, 85, 99, 0.7);
}

.search-form .el-select .el-input__inner {
  color: #e5e7eb !important;
}

/* 下拉框样式 */
.el-select-dropdown {
  background-color: #2d3748 !important;
  border: 1px solid #4b5563 !important;
}

.el-select-dropdown__item {
  color: #e5e7eb !important;
}

.el-select-dropdown__item:hover {
  background-color: #4b5563 !important;
}

.el-select-dropdown__item.selected {
  background-color: #3b82f6 !important;
  color: white !important;
}

/* 搜索按钮样式 */
.search-form .el-button--primary {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
}

.search-form .el-button--primary:hover {
  background-color: #2563eb;
  border-color: #2563eb;
}

.search-form .el-button {
  background-color: #4b5563;
  border-color: #4b5563;
  color: #e5e7eb;
}

.search-form .el-button:hover {
  background-color: #6b7280;
  border-color: #6b7280;
  color: #ffffff;
}

/* 表格样式 */
.customer-table {
  background-color: rgba(31, 41, 55, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(75, 85, 99, 0.5);
  border-radius: 4px;
  overflow: hidden;
}

/* 表头样式 */
.customer-table .el-table__header-wrapper th {
  background-color: rgba(55, 65, 81, 0.75) !important;
  color: #e5e7eb !important;
  border-bottom: 1px solid rgba(75, 85, 99, 0.6) !important;
  padding: 10px 0 !important;
  vertical-align: middle;
  text-align: center;
}

/* 表格行样式 */
.customer-table .el-table__row {
  background-color: transparent !important;
  color: #cdd6e8 !important;
}

.customer-table .el-table__row:hover>td {
  background-color: rgba(45, 55, 72, 0.5) !important;
  color: #ffffff !important;
}

/* 斑马纹样式 */
.customer-table .el-table__row.el-table__row--striped {
  background-color: rgba(37, 48, 65, 0.3) !important;
}

.customer-table .el-table__row.el-table__row--striped:hover>td {
  background-color: rgba(45, 55, 72, 0.5) !important;
}

/* 表格单元格样式 */
.customer-table .el-table__cell {
  border-bottom: 1px solid rgba(75, 85, 99, 0.3) !important;
  padding: 10px 0 !important;
}

/* 标签样式 */
.el-tag {
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
}

/* 分页区域样式 */
.pagination-container {
  margin-top: 15px;
  text-align: right;
  padding: 10px;
}

.el-pagination {
  color: #d1d5db;
}

.el-pagination__sizes .el-input .el-input__wrapper {
  background-color: rgba(55, 65, 81, 0.8) !important;
  border-color: rgba(75, 85, 99, 0.7) !important;
}

.el-pagination__sizes .el-input .el-input__inner {
  color: #e5e7eb !important;
}

.el-pagination button:disabled {
  background-color: rgba(55, 65, 81, 0.5) !important;
  color: #9ca3af !important;
  border-color: rgba(75, 85, 99, 0.5) !important;
}

.el-pagination__prev,
.el-pagination__next,
.el-pagination__jump-prev,
.el-pagination__jump-next {
  background-color: rgba(55, 65, 81, 0.8) !important;
  color: #e5e7eb !important;
  border-color: rgba(75, 85, 99, 0.7) !important;
}

.el-pagination__item {
  background-color: rgba(55, 65, 81, 0.8) !important;
  color: #e5e7eb !important;
  border-color: rgba(75, 85, 99, 0.7) !important;
}

.el-pagination__item.active {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: white !important;
}

/* 详情对话框样式 */
.customer-dialog .el-dialog {
  background-color: #2d3748;
  border-radius: 8px;
}

.customer-dialog .el-dialog__title {
  color: #e5e7eb;
}

.customer-dialog .el-dialog__header {
  border-bottom: 1px solid rgba(75, 85, 99, 0.5);
}

.customer-dialog .el-dialog__footer {
  border-top: 1px solid rgba(75, 85, 99, 0.5);
  padding: 15px 20px;
}

/* 描述列表样式 */
.el-descriptions {
  color: #e5e7eb;
}

.el-descriptions__label {
  color: #d1d5db !important;
  font-weight: 500;
}

.el-descriptions__cell {
  border-color: rgba(75, 85, 99, 0.3) !important;
}

/* 时间线样式 */
.el-timeline {
  padding: 10px 0;
}

.el-timeline-item__timestamp {
  color: #9ca3af;
}

.el-card {
  background-color: rgba(55, 65, 81, 0.5);
  border-color: rgba(75, 85, 99, 0.5);
  color: #e5e7eb;
}

/* 分割线样式 */
.el-divider {
  background-color: rgba(75, 85, 99, 0.3);
}

.el-divider__text {
  color: #d1d5db;
  background-color: #2d3748;
  padding: 0 10px;
}

/* 固定列样式 */
.el-table__fixed-right {
  background-color: rgba(31, 41, 55, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.el-table__fixed-right::before {
  background-color: transparent;
}

/* 按钮图标样式 */
.el-icon {
  color: currentColor;
}
</style>
